This document is adapted from the Bar Charts section of the Altair Example Gallery.

Our first step is to set up our environment:

## 
## Attaching package: 'dplyr'
## The following objects are masked from 'package:stats':
## 
##     filter, lag
## The following objects are masked from 'package:base':
## 
##     intersect, setdiff, setequal, union

Faceted Scatter Plot with Linked Brushing

Altair example

Data

glimpse(vega_data$cars())
## Observations: 406
## Variables: 9
## $ Acceleration     <dbl> 12.0, 11.5, 11.0, 12.0, 10.5, 10.0, 9.0, 8.5,...
## $ Cylinders        <dbl> 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 4, 8, 8, 8, 8, ...
## $ Displacement     <dbl> 307, 350, 318, 304, 302, 429, 454, 440, 455, ...
## $ Horsepower       <dbl> 130, 165, 150, 150, 140, 198, 220, 215, 225, ...
## $ Miles_per_Gallon <dbl> 18, 15, 18, 16, 17, 15, 14, 14, 14, 15, NaN, ...
## $ Name             <chr> "chevrolet chevelle malibu", "buick skylark 3...
## $ Origin           <chr> "USA", "USA", "USA", "USA", "USA", "USA", "US...
## $ Weight_in_lbs    <dbl> 3504, 3693, 3436, 3433, 3449, 4341, 4354, 431...
## $ Year             <dttm> 1970-01-01, 1970-01-01, 1970-01-01, 1970-01-...

Chart

Interactive Average

Altair example

Data

## Observations: 1,461
## Variables: 6
## $ date          <dttm> 2012-01-01, 2012-01-02, 2012-01-03, 2012-01-04,...
## $ precipitation <dbl> 0.0, 10.9, 0.8, 20.3, 1.3, 2.5, 0.0, 0.0, 4.3, 1...
## $ temp_max      <dbl> 12.8, 10.6, 11.7, 12.2, 8.9, 4.4, 7.2, 10.0, 9.4...
## $ temp_min      <dbl> 5.0, 2.8, 7.2, 5.6, 2.8, 2.2, 2.8, 2.8, 5.0, 0.6...
## $ wind          <dbl> 4.7, 4.5, 2.3, 4.7, 6.1, 2.2, 2.3, 2.0, 3.4, 3.4...
## $ weather       <chr> "drizzle", "rain", "rain", "rain", "rain", "rain...

Chart

Interactive Chart with Cross-Highlight

Altair example

Data

## Observations: 3,201
## Variables: 16
## $ Creative_Type          <list> [NULL, NULL, NULL, NULL, "Contemporary...
## $ Director               <list> [NULL, NULL, NULL, NULL, NULL, NULL, "...
## $ Distributor            <list> ["Gramercy", "Strand", "Lionsgate", "F...
## $ IMDB_Rating            <dbl> 6.1, 6.9, 6.8, NaN, 3.4, NaN, 7.7, 3.8,...
## $ IMDB_Votes             <dbl> 1071, 207, 865, NaN, 165, NaN, 15133, 3...
## $ MPAA_Rating            <list> ["R", "R", NULL, NULL, "R", NULL, "R",...
## $ Major_Genre            <list> [NULL, "Drama", "Comedy", "Comedy", "D...
## $ Production_Budget      <dbl> 8000000, 300000, 250000, 300000, 100000...
## $ Release_Date           <list> ["12-Jun-98", "7-Aug-98", "28-Aug-98",...
## $ Rotten_Tomatoes_Rating <dbl> NaN, NaN, NaN, 13, 62, NaN, NaN, NaN, 2...
## $ Running_Time_min       <dbl> NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN,...
## $ Source                 <list> [NULL, NULL, NULL, NULL, "Original Scr...
## $ Title                  <list> ["The Land Girls", "First Love, Last R...
## $ US_DVD_Sales           <dbl> NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN,...
## $ US_Gross               <dbl> 146083, 10876, 203134, 373615, 1009819,...
## $ Worldwide_Gross        <dbl> 146083, 10876, 203134, 373615, 1087521,...

Chart

Interactive Crossfilter

Altair example

Note: alt$repeat() must be translated to alt$\x60repeat\x60().

Data

## Observations: 2,000
## Variables: 5
## $ date        <dttm> 2001-01-14 21:55:00, 2001-03-26 20:15:00, 2001-03...
## $ delay       <dbl> 0, -11, -3, 12, 2, 47, 3, -4, 4, 0, 18, -7, -10, 2...
## $ destination <chr> "SMF", "SLC", "LAX", "SNA", "LAX", "AUS", "PHX", "...
## $ distance    <dbl> 480, 507, 714, 342, 373, 189, 872, 723, 318, 487, ...
## $ origin      <chr> "SAN", "PHX", "ELP", "SJC", "SMF", "DAL", "AUS", "...

Chart

Interactive Rectangular Brush

Altair example

Data

glimpse(vega_data$cars())
## Observations: 406
## Variables: 9
## $ Acceleration     <dbl> 12.0, 11.5, 11.0, 12.0, 10.5, 10.0, 9.0, 8.5,...
## $ Cylinders        <dbl> 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 4, 8, 8, 8, 8, ...
## $ Displacement     <dbl> 307, 350, 318, 304, 302, 429, 454, 440, 455, ...
## $ Horsepower       <dbl> 130, 165, 150, 150, 140, 198, 220, 215, 225, ...
## $ Miles_per_Gallon <dbl> 18, 15, 18, 16, 17, 15, 14, 14, 14, 15, NaN, ...
## $ Name             <chr> "chevrolet chevelle malibu", "buick skylark 3...
## $ Origin           <chr> "USA", "USA", "USA", "USA", "USA", "USA", "US...
## $ Weight_in_lbs    <dbl> 3504, 3693, 3436, 3433, 3449, 4341, 4354, 431...
## $ Year             <dttm> 1970-01-01, 1970-01-01, 1970-01-01, 1970-01-...

Chart

Multi-Line Highlight

Altair example

This multi-line chart uses an invisible Voronoi tessellation to handle mouseover to identify the nearest point and then highlight the line on which the point falls. It is adapted from amitkamp’s block.

Data

glimpse(vega_data$stocks())
## Observations: 560
## Variables: 3
## $ symbol <chr> "MSFT", "MSFT", "MSFT", "MSFT", "MSFT", "MSFT", "MSFT",...
## $ date   <dttm> 2000-01-01, 2000-02-01, 2000-03-01, 2000-04-01, 2000-0...
## $ price  <dbl> 39.81, 36.35, 43.22, 28.37, 25.45, 32.54, 28.40, 28.40,...

Chart

Multi-Line Tooltip

Altair Example

This example usex selections and layers to create a multi-line tooltip that tracks the x position of the cursor.

To find the x-position of the cursor, little trick is used: adding some transparent points with only an x encoding (no y encoding) and tie a nearest selection to these, tied to the x field.

Data

Definition

glimpse(data)
## Observations: 300
## Variables: 3
## $ category <chr> "A", "A", "A", "A", "A", "A", "A", "A", "A", "A", "A"...
## $ x        <int> 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16...
## $ y        <dbl> 1.37, 0.81, 1.17, 1.80, 2.20, 2.09, 3.60, 3.51, 5.53,...

Chart

Seattle Weather Interactive

Altair example

Data

glimpse(vega_data$seattle_weather())
## Observations: 1,461
## Variables: 6
## $ date          <dttm> 2012-01-01, 2012-01-02, 2012-01-03, 2012-01-04,...
## $ precipitation <dbl> 0.0, 10.9, 0.8, 20.3, 1.3, 2.5, 0.0, 0.0, 4.3, 1...
## $ temp_max      <dbl> 12.8, 10.6, 11.7, 12.2, 8.9, 4.4, 7.2, 10.0, 9.4...
## $ temp_min      <dbl> 5.0, 2.8, 7.2, 5.6, 2.8, 2.2, 2.8, 2.8, 5.0, 0.6...
## $ wind          <dbl> 4.7, 4.5, 2.3, 4.7, 6.1, 2.2, 2.3, 2.0, 3.4, 3.4...
## $ weather       <chr> "drizzle", "rain", "rain", "rain", "rain", "rain...

Chart

Selection Detail Example

Altair example

This example shows a selection that links two views of data: the left panel contains one point per object, and the right panel contains one line per object. Clicking on either the points or lines will select the corresponding objects in both views of the data.

The challenge lies in expressing such hierarchical data in a way that Altair can handle. We do this by merging the data into a “long form” dataframe, and aggregating identical metadata for the final plot.

Data

Definition

glimpse(data)
## Observations: 1,000
## Variables: 5
## $ id    <int> 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,...
## $ time  <int> 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 1...
## $ value <dbl> -0.02142707, 0.64907101, 0.21445397, -0.89942582, -0.292...
## $ x     <dbl> -0.004620768, -0.004620768, -0.004620768, -0.004620768, ...
## $ y     <dbl> -0.4845954, -0.4845954, -0.4845954, -0.4845954, -0.48459...

Chart

Selection Histogram

Altair example

This chart shows an example of using an interval selection to filter the contents of an attached histogram, allowing the user to see the proportion of items in each category within the selection.

TODO: find a way to fix the numerical scale of the bar chart

Data

glimpse(vega_data$cars())
## Observations: 406
## Variables: 9
## $ Acceleration     <dbl> 12.0, 11.5, 11.0, 12.0, 10.5, 10.0, 9.0, 8.5,...
## $ Cylinders        <dbl> 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 4, 8, 8, 8, 8, ...
## $ Displacement     <dbl> 307, 350, 318, 304, 302, 429, 454, 440, 455, ...
## $ Horsepower       <dbl> 130, 165, 150, 150, 140, 198, 220, 215, 225, ...
## $ Miles_per_Gallon <dbl> 18, 15, 18, 16, 17, 15, 14, 14, 14, 15, NaN, ...
## $ Name             <chr> "chevrolet chevelle malibu", "buick skylark 3...
## $ Origin           <chr> "USA", "USA", "USA", "USA", "USA", "USA", "US...
## $ Weight_in_lbs    <dbl> 3504, 3693, 3436, 3433, 3449, 4341, 4354, 431...
## $ Year             <dttm> 1970-01-01, 1970-01-01, 1970-01-01, 1970-01-...

Chart

Simple Interactive Colored Scatterplot

Altair example

Data

glimpse(vega_data$cars())
## Observations: 406
## Variables: 9
## $ Acceleration     <dbl> 12.0, 11.5, 11.0, 12.0, 10.5, 10.0, 9.0, 8.5,...
## $ Cylinders        <dbl> 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 4, 8, 8, 8, 8, ...
## $ Displacement     <dbl> 307, 350, 318, 304, 302, 429, 454, 440, 455, ...
## $ Horsepower       <dbl> 130, 165, 150, 150, 140, 198, 220, 215, 225, ...
## $ Miles_per_Gallon <dbl> 18, 15, 18, 16, 17, 15, 14, 14, 14, 15, NaN, ...
## $ Name             <chr> "chevrolet chevelle malibu", "buick skylark 3...
## $ Origin           <chr> "USA", "USA", "USA", "USA", "USA", "USA", "US...
## $ Weight_in_lbs    <dbl> 3504, 3693, 3436, 3433, 3449, 4341, 4354, 431...
## $ Year             <dttm> 1970-01-01, 1970-01-01, 1970-01-01, 1970-01-...

Chart

US Population Over Time

Altair example

This chart visualizes the age distribution of the US population over time. It uses a slider widget that is bound to the year to visualize the age distribution over time.

Data

glimpse(vega_data$population())
## Observations: 570
## Variables: 4
## $ age    <dbl> 0, 0, 5, 5, 10, 10, 15, 15, 20, 20, 25, 25, 30, 30, 35,...
## $ people <dbl> 1483789, 1450376, 1411067, 1359668, 1260099, 1216114, 1...
## $ sex    <dbl> 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1...
## $ year   <dbl> 1850, 1850, 1850, 1850, 1850, 1850, 1850, 1850, 1850, 1...

Chart